<template>
  <div class="page">
    <div class="container">
      <!-- 提交包裹 -->
      <img v-if="isZhCnAndValidStatus()" src="@/assets/images/waybillDetail/un_parcel_zh.png" class="head-flow" alt="">
      <img v-if="isEnAndValidStatus()" src="@/assets/images/waybillDetail/un_parcel_en.png" class="head-flow" alt="">
      <!-- 支付运单 -->
      <img v-if="isZhPaying()" src="@/assets/images/waybillDetail/pay_ing_zh.png" class="head-flow" alt="">
      <img v-if="isEnPaying()" src="@/assets/images/waybillDetail/pay_ing_en.png" class="head-flow" alt="">
      <!-- 已发货 -->
      <img v-if="isZhShipping()" src="@/assets/images/waybillDetail/shipping_zh.png" class="head-flow" alt="">
      <img v-if="isEnShipping()" src="@/assets/images/waybillDetail/shipping_en.png" class="head-flow" alt="">
      <!-- 已完成 -->
      <img v-if="userLanguage.code == 'zh_CN' && dataInfo.status == 'COMPLETED'"
        src="@/assets/images/waybillDetail/confirm_zh.png" class="head-flow" alt="">
      <img v-if="userLanguage.code != 'zh_CN' && dataInfo.status == 'COMPLETED'"
        src="@/assets/images/waybillDetail/confirm_en.png" class="head-flow" alt="">

      <div class="gray-rect">
        <div class="write-area" :style="computeStyle">
          <div class="left">
            <div class="rect-head">
              <div class="head-text">{{ $t('wayBill.parcel_status') }}：{{ parcel_status }}</div>
              <div class="head-text">{{ $t('wayBill.parcel_No') }}：{{ dataInfo.expressOrderNo }}</div>
              <div class="head-text">
                {{ $t('user.submissionTime') }}：{{ dataInfo.createTime }}
              </div>
            </div>
            <div
              v-if="dataInfo.status == 'DELIVERED' || dataInfo.status == 'COMPLETED' || dataInfo.status == 'WAIT_CONFIRM' || dataInfo.status == 'CONFIRMING' || dataInfo.status == 'CLEAR_BALANCE'"
              class="look-btn" @click="viewBtn">{{ $t('wayBill.look_picture') }}</div>
          </div>
          <!-- 待支付 -->
          <div class="list-rect" v-if="dataInfo.status == 'WAIT_PAYMENT'">
            <div class="text-desc">{{ $t('wayBill.status_text') }}</div>
            <div class="desc-wait" v-if="dataInfo.autoCancelTime && dataInfo.autoCancelTime > 0 && dataInfo.autoCancelTime > dataInfo.serverTime">
							{{ $t('wayBill.have_time') }}
							<span> {{ days }} day {{ hours }} hou {{ min }} min {{ sec }} sec</span>
							{{ $t('wayBill.pay_tips') }}
						</div>
            <div class="feature-sty">
              <span class="cancel-btn" @click="cancelMet()">{{ $t('wayBill.cancel_parcel') }}</span>
              <span class="pay-btn" @click="payMetBtn()">{{ $t('pay.payment') }}</span>
            </div>
          </div>
          <!-- 待确认、确认中-->
          <div class="list-rect"
            v-if="dataInfo.status == 'WAIT_CONFIRM' || dataInfo.status == 'CONFIRMING' || dataInfo.status == 'CLEAR_BALANCE'">
            <div class="text-desc">{{ $t('wayBill.status_text') }} <span class="amount-text">{{ userCurrency.code }}{{
              afterDiscountAmount ?
                afterDiscountAmount : dataInfo.diffFee }}</span></div>
            <div class="offer-num">{{ $t('submitParcel.alreadyDiscounted')
            }}{{ dataInfo.currencySymbol }}{{ cheapLogistics || 0 }}</div>
            <div class="desc-content"
              v-if="dataInfo.serverTime < dataInfo.overduePaymentTime && daysPay && hoursPay && minPay && secPay">
              {{ $t('wayBill.end_time_out_before') }}
              <span> {{ daysPay }} {{ $t('user.sky') }} {{ hoursPay }} {{ $t('user.hour') }} {{ minPay }}
                {{ $t('user.minutes') }} {{ secPay }} {{ $t('user.seconds') }} </span>
              {{ $t('wayBill.end_time_out_after') }}
            </div>
            <div class="feature-sty" style="gap: 0;">
              <!-- <span class="select-coupon">{{ $t('personal.select_title') }}</span> -->
              <span class="cou-text" v-if="isShow == null || isShow == ''" @click="openPop()">{{ couponCustomerId > 0 ?
                $t('personal.has_selected') : $t('personal.select_title') }}</span>
              <span class="pay-btn" @click="payMet()">
                <img src="@/assets/images/public/plan.png" class="plan-icon" alt="">
                {{ $t('pay.payment') }}
              </span>
            </div>
          </div>
          <!-- 待发货 -->
          <div class="list-rect" v-if="dataInfo.status == 'WAIT_SHIPPING'">
            <div class="text-desc">{{ $t('wayBill.status_text1') }}</div>
          </div>
          <!-- 处理中：即待包装 -->
          <div class="list-rect" v-if="dataInfo.status == 'WAIT_PACK'">
            <div class="text-desc">{{ $t('wayBill.status_text2') }}</div>
          </div>
          <!--  已取消 -->
          <div class="list-rect" v-if="dataInfo.status == 'CANCELED'">
            <div class="text-desc">
              <span class="dot-icon"></span>
              <span>· {{ $t('wayBill.cancel_reason') }}：{{ dataInfo.cancelReason }}</span>
            </div>
          </div>
        </div>
        <!-- 已发货 -->
        <div class="list-rect" v-if="dataInfo.status == 'DELIVERED' || dataInfo.status == 'COMPLETED'">
          <div class="tit-sty">
            <span class="pracel-title">{{ $t('wayBill.fedex_senseaware') }}</span>
            <span class="sub-tit">{{ $t('wayBill.parcel_sub_tit') }}</span>
          </div>
          <div class="loop-rect">
            <div v-if="isMore">
              <div v-for="(item, index) in dataInfo.parcelInfoList" :key="index">
                <div class="logistics-rect">
                  <div class="sub-text">
                    <!-- <span>{{ $t('wayBill.parcel') }}{{ index + 1 }}：{{ item.expressParcelId }}</span> -->
                    <span>{{ $t('wayBill.trance_text') }}{{ index + 1 }}：{{ item.expressNo }}</span>
                  </div>
                  <div v-if="item.logisticsSteps && item.logisticsSteps != null">
                    <div :class="stepsIndex == 0 ? 'first-logistics' : 'info-logistics'"
                      v-for="(stepsData, stepsIndex) in item.logisticsSteps" :key="stepsIndex">
                      <div class="info-left">
                        <span class="dot-icon"></span>
                        <span class="info-label">{{ stepsData.remarks }}</span>
                      </div>
                      <div class="info-time">{{ stepsData.acceptTime }}</div>
                    </div>
                  </div>
                  <div v-if="item.logisticsSteps == null || item.logisticsSteps.length < 1" class="un-info">
                    {{ $t('wayBill.no_data_text') }}
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <div v-for="(item, index) in dataInfo.parcelInfoList.slice(0, 2)" :key="index">
                <div class="logistics-rect">
                  <div class="sub-text">
                    <!-- <span>{{ $t('wayBill.parcel') }}{{ index + 1 }}：{{ item.expressParcelId }}</span> -->
                    <span>{{ $t('wayBill.trance_text') }}{{ index + 1 }}：{{ item.expressNo }}</span>
                  </div>
                  <div v-if="item.logisticsSteps && item.logisticsSteps != null">
                    <div :class="stepsIndex == 0 ? 'first-logistics' : 'info-logistics'"
                      v-for="(stepsData, stepsIndex) in item.logisticsSteps" :key="stepsIndex">
                      <div class="info-left">
                        <span class="dot-icon"></span>
                        <span class="info-label">{{ stepsData.remarks }}</span>
                      </div>
                      <div class="info-time">{{ stepsData.acceptTime }}</div>
                    </div>
                  </div>
                  <div v-if="item.logisticsSteps == null || item.logisticsSteps.length < 1" class="un-info">
                    {{ $t('wayBill.no_data_text') }}
                  </div>
                </div>
              </div>
            </div>
            <div v-if="!isMore && dataInfo.parcelInfoList && dataInfo.parcelInfoList.length > 2" class="more-text"
              @click="showMore()">{{
                $t('submitParcel.expand') }}
              <Icon type="ios-arrow-down" size="" />
            </div>
            <div v-if="isMore == true && dataInfo.parcelInfoList && dataInfo.parcelInfoList.length > 2"
              class="more-text" @click="pickUp()">{{
                $t('goods.collapse') }}
              <Icon type="ios-arrow-up" size="" />
            </div>
          </div>
        </div>
      </div>

      <div class="title-text">{{ $t('wayBill.address_info') }}</div>
      <div class="current-address">
        <img class="bg-border" src="@/assets/images/parcel/bg-border.png" alt="" />
        <div class="address-msg">
          <div class="msg-name">
            <div>{{ orderAddress.name }} {{ orderAddress.surname }}</div>
            <div class="name-phone">{{ orderAddress.regionCode ? `+${orderAddress.regionCode}` : orderAddress.regionCode
            }}
              {{ phoneHide(orderAddress.mobile) }}</div>
            <div>{{ orderAddress.postalCode }}</div>
          </div>
          <div class="msg-address">
            {{ orderAddress.countryText }} {{ orderAddress.provinceText }} {{ orderAddress.cityText }} {{
              orderAddress.areaText }} {{ orderAddress.addressDetail }}
          </div>
        </div>
      </div>

      <div class="title-text">{{ $t('user.logisticsInfo') }}</div>
      <div class="info-sty">
        <span>{{ $t('user.destinationCountry') }}: {{ orderAddress.countryText }}</span>
        <span>{{ $t('user.distributionMode') }}: {{ dataInfo.logisticsChannelName ? dataInfo.logisticsChannelName : '--'
        }}</span>
      </div>
      <div class="title-text"
        v-if="dataInfo.estimateFeeDetail || (dataInfo.finalFeeDetail && dataInfo.status != 'WAIT_PAYMENT' && dataInfo.status != 'CANCELED' && dataInfo.status != 'WAIT_PACK' && dataInfo.status != 'CANCELED')">
        {{ $t('wayBill.fee_detail') }}
      </div>
      <Row :gutter="24">
        <Col v-if="dataInfo.estimateFeeDetail"
          :span="dataInfo.status == 'WAIT_PAYMENT' || dataInfo.status == 'CANCELED' || dataInfo.status == 'WAIT_PACK' || dataInfo.status == 'CANCELED' ? 24 : 12">
        <div class="fee-detail">
          <div class="fee-head">
            <div class="head-title">
              <Tooltip placement="top-start" transfer max-width="400">
                {{ $t('wayBill.deposit') }}:
                <Icon class="desc" type="ios-help-circle-outline" color="#767B93" size="20" />
                <div slot="content" class="desc-service">
                  {{ $t('wayBill.deposit_desc') }}
                </div>
              </Tooltip>
              <div class="preview-tag" v-if="dataInfo.estimateFeeDetail.skipPrepaid">
                <Tooltip placement="top-start" transfer max-width="400">
                  {{ $t('submitParcel.preview_tag') }}
                  <Icon class="desc" type="ios-help-circle-outline" color="#FF186B" size="16" />
                  <div slot="content" class="desc-service">
                    {{ $t('submitParcel.preview_tag_desc') }}
                  </div>
                </Tooltip>
              </div>
            </div>
            <div>{{ dataInfo.currencySymbol }}{{ moneyMet() || 0 }}</div>
          </div>
          <Divider />
          <div class="gary-body">
            <div class="fee-head" v-if="dataInfo.estimateFeeDetail.calcWeight">
              <div class="head-title" style="gap: 4px;">{{ $t('wayBill.estimate_freight') }}:
                <Tooltip placement="top-start" transfer max-width="400">
                  <Icon class="desc" type="ios-help-circle-outline" color="#767B93" size="20" />
                  <div slot="content" class="desc-service">
                    {{ $t('wayBill.freight_desc') }}
                  </div>
                </Tooltip>
              </div>
              <div>{{ dataInfo.currencySymbol }}{{
                bigMinus(dataInfo.estimateFeeDetail.expressFee, dataInfo.estimateFeeDetail.couponFee) || 0 }}</div>
            </div>
            <div class="write-rect">
              <div class="flex-fee" v-if="dataInfo.estimateFeeDetail.calcWeight">
                <div class="left-label">
                  {{ $t('wayBill.estimated_weight') }}:
                  <Tooltip placement="top-start" transfer max-width="400">
                    <Icon class="desc" type="ios-help-circle-outline" color="#767B93" size="20"
                      style="cursor: pointer;" />
                    <div slot="content" class="desc-service">
                      {{ $t('wayBill.weight_text_tooltip') }}
                    </div>
                  </Tooltip>
                </div>
                <div class="right-data">{{ dataInfo.estimateFeeDetail.calcWeight || 0 }}g</div>
              </div>
              <div class="flex-fee" v-if="dataInfo.estimateFeeDetail.calcWeight">
                <div class="left-label">{{ $t('wayBill.Estimated_logistics_cost') }}:</div>
                <div class="right-data">{{ dataInfo.currencySymbol }}{{ dataInfo.estimateFeeDetail.logisticsFee || 0 }}
                </div>
              </div>
              <div class="flex-fee" v-if="dataInfo.estimateFeeDetail.calcWeight">
                <div class="left-label">{{ $t('home.tax_text5') }}:</div>
                <div class="right-data">{{ dataInfo.currencySymbol }}{{ dataInfo.estimateFeeDetail.operateFee || 0 }}
                </div>
              </div>
              <div class="flex-fee" v-if="dataInfo.estimateFeeDetail.calcWeight">
                <div class="left-label">{{ $t('pay.fuel_charge') }}:</div>
                <div class="right-data">{{ dataInfo.currencySymbol }}{{ dataInfo.estimateFeeDetail.fuelFee || 0 }}</div>
              </div>
              <div class="flex-fee">
                <div class="left-label">{{ $t('wayBill.coupon_before_fee1') }}:</div>
                <div class="right-data">{{ dataInfo.currencySymbol }}{{ dataInfo.estimateFeeDetail.expressFee || 0 }}
                </div>
              </div>
              <div class="flex-fee">
                <div class="left-label">{{ $t('wayBill.coupon_fee') }}:</div>
                <div class="right-data">{{ dataInfo.currencySymbol }}{{ dataInfo.estimateFeeDetail.couponFee || 0 }}
                </div>
              </div>
            </div>
            <div class="fee-head" v-if="dataInfo.estimateFeeDetail.calcWeight">
              <div class="head-title">{{ $t('home.tax_text3') }}:</div>
              <div>{{ dataInfo.currencySymbol }}{{ dataInfo.estimateFeeDetail.insuranceFee || 0 }}</div>
            </div>
            <div class="fee-head" v-if="dataInfo.estimateFeeDetail.calcWeight">
              <div class="head-title">{{ $t('home.tax_text6') }}:</div>
              <div>{{ dataInfo.currencySymbol }}{{ dataInfo.estimateFeeDetail.serviceFee || 0 }}</div>
            </div>
            <div class="write-rect" v-if="dataInfo.serviceItemsList">
              <div class="service-text">{{ namesJoined }}</div>
            </div>
            <div class="fee-head" v-if="dataInfo.estimateFeeDetail.calcWeight">
              <div class="head-title">{{ $t('home.tax_text1') }}:</div>
              <div>{{ dataInfo.currencySymbol }} 0</div>
            </div>
            <div class="fee-head" v-if="dataInfo.estimateFeeDetail.calcWeight">
              <div class="head-title">{{ $t('home.tax_text7') }}:</div>
              <div>{{ dataInfo.currencySymbol }}{{ dataInfo.estimateFeeDetail.storageFee || 0 }}</div>
            </div>
          </div>
        </div>
        </Col>
        <Col span="12"
          v-if="dataInfo.finalFeeDetail && dataInfo.status != 'WAIT_PAYMENT' && dataInfo.status != 'CANCELED' && dataInfo.status != 'WAIT_PACK' && dataInfo.status != 'CANCELED'">
        <div class="fee-confirm">
          <div class="fee-head">
            <div class="head-title">{{ $t('wayBill.final_payment') }}:
              <Tooltip placement="top-start" transfer max-width="400">
                <Icon class="desc" v-if="!dataInfo.finalFeeDetail.calcWeight" type="ios-help-circle-outline"
                  color="#767B93" size="20" />
                <div slot="content" class="desc-service">
                  <!-- calcType：1：包裹重 2：体积重 -->
                  {{ dataInfo.calcType == 1 ? $t('wayBill.end_pay_desc_parcel') : $t('wayBill.end_pay_desc_size') }}
                </div>
              </Tooltip>
            </div>
            <div>{{ dataInfo.currencySymbol }}{{ dataInfo.finalFeeDetail.calcWeight ? sureAmount() :
              dataInfo.finalFeeDetail.totalFee || 0 }}</div>
          </div>
          <Divider />
          <div class="gary-body">
            <div class="fee-head" v-if="dataInfo.finalFeeDetail.calcWeight">
              <div class="head-title" style="gap: 4px;">{{ $t('wayBill.freight_after_weighing1') }}:
                <Tooltip placement="top-start" transfer max-width="400">
                  <Icon class="desc" type="ios-help-circle-outline" color="#767B93" size="20" />
                  <div slot="content" class="desc-service">
                    {{ dataInfo.finalFeeDetail.calcWeight ? $t('wayBill.freight_desc') :
                      $t('wayBill.after_freight_desc') }}
                  </div>
                </Tooltip>
              </div>
              <div>{{ dataInfo.currencySymbol }}{{ bigMinus(dataInfo.finalFeeDetail.expressFee,
                dataInfo.finalFeeDetail.couponFee) || 0 }}</div>
            </div>
            <div class="write-rect">
              <div class="flex-fee" v-if="dataInfo.finalFeeDetail.calcWeight">
                <div class="left-label">
                  {{ $t('wayBill.accurate_weight1') }}:
                  <Tooltip placement="top-start" transfer max-width="400">
                    <Icon class="desc" type="ios-help-circle-outline" color="#767B93" size="20"
                      style="cursor: pointer;" />
                    <div slot="content" class="desc-service">
                      {{ $t('wayBill.weight_text1_tooltip') }}
                    </div>
                  </Tooltip>
                </div>
                <div class="right-data">{{ dataInfo.finalFeeDetail.calcWeight || 0 }}g</div>
              </div>
              <div class="flex-fee" v-if="dataInfo.finalFeeDetail.calcWeight">
                <div class="left-label">{{ $t('wayBill.sure_logistics_cost1') }}:</div>
                <div class="right-data">{{ dataInfo.currencySymbol }}{{ dataInfo.finalFeeDetail.logisticsFee || 0 }}
                </div>
              </div>
              <div class="flex-fee" v-if="dataInfo.finalFeeDetail.calcWeight">
                <div class="left-label">{{ $t('home.tax_text5') }}:</div>
                <div class="right-data">{{ dataInfo.currencySymbol }}{{ dataInfo.finalFeeDetail.operateFee || 0 }}</div>
              </div>
              <div class="flex-fee" v-if="dataInfo.finalFeeDetail.calcWeight">
                <div class="left-label">{{ $t('pay.fuel_charge') }}:</div>
                <div class="right-data">{{ dataInfo.currencySymbol }}{{ dataInfo.finalFeeDetail.fuelFee || 0 }}</div>
              </div>
              <div class="flex-fee">
                <div class="left-label">{{ $t('wayBill.coupon_before_fee1') }}:</div>
                <div class="right-data">{{ dataInfo.currencySymbol }}{{ dataInfo.finalFeeDetail.expressFee || 0 }}</div>
              </div>
              <div class="flex-fee">
                <div class="left-label">{{ $t('wayBill.coupon_fee') }}:</div>
                <div class="right-data">{{ dataInfo.currencySymbol }}{{ dataInfo.finalFeeDetail.couponFee || 0 }}</div>
              </div>
            </div>
            <div class="fee-head" v-if="dataInfo.finalFeeDetail.calcWeight">
              <div class="head-title">{{ $t('home.tax_text3') }}:</div>
              <div>{{ dataInfo.currencySymbol }}{{ dataInfo.finalFeeDetail.insuranceFee || 0 }}</div>
            </div>
            <div class="fee-head" v-if="dataInfo.finalFeeDetail.calcWeight">
              <div class="head-title">{{ $t('home.tax_text6') }}:</div>
              <div>{{ dataInfo.currencySymbol }}{{ dataInfo.finalFeeDetail.serviceFee || 0 }}</div>
            </div>
            <div class="write-rect" v-if="dataInfo.serviceItemsList && dataInfo.serviceItemsListFinal">
              <div class="service-text">
                <span v-for="(item, index) in dataInfo.serviceItemsList" :key="index">
                  <span :class="{ strikethrough: !isItemInFinalList(item.name) }">
                    {{ item.name }}
                  </span>
                  <Tooltip placement="top-start" transfer max-width="400">
                    <Icon class="desc" v-if="!isItemInFinalList(item.name)" type="ios-help-circle-outline"
                      color="#767B93" size="20" style="cursor: pointer;" />
                    <div slot="content" class="desc-service">
                      {{ $t('submitParcel.text_tip_tooltip') }}
                    </div>
                  </Tooltip>
                  <span v-if="index < dataInfo.serviceItemsList.length - 1">、</span>
                </span>
              </div>
            </div>
            <div class="fee-head" v-if="dataInfo.finalFeeDetail.calcWeight">
              <div class="head-title">{{ $t('home.tax_text1') }}:</div>
              <div>{{ dataInfo.currencySymbol }} 0</div>
            </div>
            <div class="fee-head" v-if="dataInfo.finalFeeDetail.calcWeight">
              <div class="head-title">{{ $t('home.tax_text7') }}:</div>
              <div>{{ dataInfo.currencySymbol }}{{ dataInfo.finalFeeDetail.storageFee || 0 }}</div>
            </div>
          </div>
        </div>
        </Col>
      </Row>

      <div class="flex-title">
        <div class="title-text">
          <div class="text-label">{{ $t('wayBill.add_service') }}：</div>
          <div class="tag-sty">
            <div class="none-text" v-if="!dataInfo.serviceItemsList || dataInfo.serviceItemsList.length === 0">
              {{ $t('submitParcel.none_text') }}
            </div>
            <div :class="item.charge > 0 ? 'service-tag' : 'charge-tag'" v-for="item in loopArray" :key="item.id">
              {{ item.name }}
              <Tooltip placement="top" transfer max-width="400">
                <Icon class="desc" type="ios-help-circle-outline" size="20" />
                <div slot="content" class="desc-service">{{ item.description }}</div>
              </Tooltip>
            </div>
          </div>
        </div>
      </div>


      <div class="flex-title">
        <div class="title-text">
          <div class="text-label">{{ $t('submitParcel.insure_service') }}：</div>
          <div class="tag-sty">
            <div class="none-text" v-if="!dataInfo.insuranceList || dataInfo.insuranceList.length === 0">{{
              $t('submitParcel.none_text') }}</div>
            <div class="insure-tag" v-for="item in dataInfo.insuranceList" :key="item.id">
              {{ userLanguage.code == 'zh_CN' ? item.insuranceName : item.insuranceNameEn }}
              <Tooltip placement="top" transfer max-width="400">
                <Icon class="desc" type="ios-help-circle-outline" color="#767B93" size="20" />
                <div slot="content" class="desc-service">{{ userLanguage.code == 'zh_CN' ? item.notes : item.notesEn }}
                </div>
              </Tooltip>
            </div>
          </div>
        </div>
      </div>

      <div class="flex-title">
        <div class="title-text">
          <div class="text-label">{{ $t('submitParcel.yourTaxNumber') }}：</div>
          <div class="none-text" v-if="!dataInfo.taxNumber || dataInfo.taxNumber == null">{{
            $t('submitParcel.none_text') }}</div>
          <div class="text-label" v-if="dataInfo.taxNumber">{{ dataInfo.taxNumber }}</div>
        </div>
      </div>

      <div class="title-text">{{ $t('submitParcel.brandList') }}</div>
      <div class="table-wrap">
        <div class="table">
          <div class="table-header">
            <Row>
              <Col span="3">
              <div class="th">{{ $t('user.commodityInfo') }}</div>
              </Col>
              <Col span="5">
              <div class="th" style="text-align: left;margin-left: 61px;">{{ $t('wayBill.name') }}</div>
              </Col>
              <Col span="3">
              <div class="th">{{ $t('user.quantity') }}</div>
              </Col>
              <Col span="3">
              <div class="th">{{ $t('user.weight') }}(g)</div>
              </Col>
              <Col span="3">
              <div class="th">
                {{ $t('user.dimension') }}(cm)
              </div>
              </Col>
              <Col span="3">
              <div class="th">
                {{ $t('user.commodityType') }}
              </div>
              </Col>
              <Col span="4">
              <div class="th">{{ $t('user.operate') }}</div>
              </Col>
            </Row>
          </div>
          <div class="table-content">
            <div class="table-tr" v-for="item in dataList" :key="item.id">
              <div class="table-top"></div>
              <div class="table-body">
                <div class="order-item">
                  <Row>
                    <!-- 商品信息 -->
                    <Col span="3">
                    <div class="td picture-sty">
                      <product-picture v-if="item.mainImg" :image-list="[item.mainImg]"></product-picture>
                    </div>
                    </Col>
                    <!-- 姓名 -->
                    <Col span="5">
                    <div class="td">
                      <div class="commodity-content">
                        <div class="title">{{ item.subject }}</div>
                        <div class="intro" v-for="attributeItem in item.skuAttrEnumFormatList" :key="attributeItem.id">
                          {{ attributeItem.name }}：{{ attributeItem.value }}
                        </div>
                      </div>
                    </div>
                    </Col>
                    <!-- 数量 -->
                    <Col span="3">
                    <div class="td align-sty">{{ item.quantity }}</div>
                    </Col>
                    <!-- 重量 -->
                    <Col span="3">
                    <div class="td align-sty">{{ item.weight }}</div>
                    </Col>
                    <!-- 尺寸 -->
                    <Col span="3">
                    <div class="td align-sty">{{ item['length'] }}*{{ item.width }}*{{ item.height }}</div>
                    </Col>
                    <!-- 商品类别 -->
                    <Col span="3">
                    <div class="td align-sty" style="margin-left: 25px;" v-if="item.categoryName">
                      <Tooltip transfer placement="top" max-width="500">
                        <div slot="content">
                          {{ $t('submitParcel.tagSub') }}
                        </div>
                        <div class="td-type" v-if="item.categoryName">
                          <div class="type-name type-icon">{{ item.categoryName || '' }}</div>
                          <div class="iconfont icon-bangzhu type-icon"></div>
                        </div>
                      </Tooltip>
                    </div>
                    </Col>
                    <!-- 操作 -->
                    <Col span="4">
                    <div class="td"></div>
                    </Col>
                  </Row>
                </div>
              </div>
            </div>
            <!-- <div class="all-money">{{ $t('wayBill.aggregate') }} : {{ dataInfo.currencySymbol }}{{ allFee || 0 }}</div> -->
          </div>
        </div>
        <!-- <t-loading v-if="loading"></t-loading> -->
        <!-- <t-no-data v-if="!loading && dataList.length == 0"></t-no-data> -->
      </div>
      <div class="fix-bot"
        v-if="dataInfo.status == 'WAIT_CONFIRM' || dataInfo.status == 'CONFIRMING' || dataInfo.status == 'CLEAR_BALANCE'">
        <div class="head">
          <Checkbox v-model="agree">
            <span class="text">{{ $t("submitParcel.awareness") }}</span>
            <router-link :to="`/notice/${taxAgreement.id}`" target="_blank" class="tag">{{
              $t("submitParcel.taxReminder") }}</router-link>
            <router-link :to="`/notice/${noticeAgreement.id}`" target="_blank" class="tag">{{
              $t("submitParcel.logisticsReminder") }}</router-link>
          </Checkbox>
        </div>
        <div class="info-fee">
          <div class="fee">
            <div class="amount">
              {{ $t('pay.unpaid_total_price') }}：
              <span>{{ dataInfo.currencySymbol }}{{ afterDiscountAmount ? afterDiscountAmount : dataInfo.diffFee
              }}</span>
            </div>
            <div class="offer">
              {{ $t('submitParcel.alreadyDiscounted') }}{{ dataInfo.currencySymbol }}{{ cheapLogistics || 0 }}
            </div>
          </div>
          <div class="cou-btn" v-if="isShow == null || isShow == ''" @click="openPop()">{{ couponCustomerId > 0 ?
            $t('personal.has_selected') : $t('personal.select_title') }}</div>
          <div class="pay-btn" @click="payMet()">
            {{ $t('user.paymentFreight') }}
          </div>
        </div>
      </div>
    </div>
    <!-- 取消运单弹框 -->
    <t-cancel-parcel ref="cancelRef" :cancelItem="cancelItem" @confirmCancel="confirmCancel"></t-cancel-parcel>
    <!-- 查看图片 -->
    <t-view-picture ref="viewRef" :viewItem="viewItem" :viewImg="dataInfo.qcImgUrl"></t-view-picture>
    <!-- 优惠券 -->
    <order-coupon-list ref="orderCouponRef" :couponDataList="couponDataList" couponType="EXPRESS"
      :userLanguage="userLanguage" :userInfo="userInfo" :userCurrency="userCurrency" @loadingFc="loadingFc"
      @amountAssignment="amountAssignment" @handleInfo="getCheapInfo" @uncheck="callOff"></order-coupon-list>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { phoneHide } from "@/common/common";
import { expressOrderCancel, detailList, submitConfirming, confirmingDetails } from "@/api/expressOrder";
import { myAvailableCouponList } from "@/api/order";
import detailsList from "@/views/main/user/my-shipment/detailsList";
import ProductPicture from "@/views/main/user/components/product-picture";
import TCancelParcel from "@/components/t-cancel-parcel.vue";
import TViewPicture from "@/components/t-view-picture.vue";
import { bigMinus } from "@/common/digital-computation";
import { pointUser } from "@/common/point/api-hook";//打点日志
import OrderCouponList from '../pay/compontents/order-coupon-list.vue';

export default {
  components: { detailsList, ProductPicture, TCancelParcel, TViewPicture, OrderCouponList },
  data() {
    return {
      phoneHide,
      dataList: [],
      dataInfo: {}, // 商品详情
      orderAddress: {},//地址信息
      expressOrderNo: "", // 运单编号
      days: '00',
      hours: '00',
      min: '00',
      sec: '00',
      daysPay: '00',
      hoursPay: '00',
      minPay: '00',
      secPay: '00',
      allFee: 0,
      cancelItem: {
        title: this.$t('wayBill.cancel_pop_title'),
        text: this.$t('wayBill.confirm_cancel'),
        placeholder: this.$t('user.desc_reason'),
        cancel: this.$t("wayBill.close_pop"),
        confirm: this.$t('wayBill.yes_confirm')
      },
      viewItem: {
        title: this.$t('user.viewPicture'),
        lineText: this.$t('wayBill.view_tips')
      },
      isMore: false,
      agree: true,
      cheapLogistics: '',
      logisticsFee: '',
      afterDiscountAmount: '',
      couponCustomerId: '',
      isShow: '',
      couponDataList: [],
			interval:null,
			interval1:null
    }
  },
  computed: {
    ...mapState({
      userLanguage: (state) => state.user.userLanguage,
      userCurrency: (state) => state.user.userCurrency,
      userInfo: (state) => state.user.userInfo,
      taxAgreement: (state) => {
        // 税费提醒
        let obj = "";
        if (state.config.config) {
          obj = state.config.config.articleMap.CFG_ARTICLE_TAX_WARNING;
        }
        return obj;
      },
      noticeAgreement: (state) => {
        // 物流提醒
        let obj = "";
        if (state.config.config) {
          obj = state.config.config.articleMap.CFG_ARTICLE_DELIVERY_NOTICE;
        }
        return obj;
      },
    }),
    loopArray() {
      if (this.dataInfo && this.dataInfo.serviceItemsListFinal) {
        return this.dataInfo.serviceItemsListFinal;
      } else {
        return this.dataInfo.serviceItemsList;
      }
      // 根据 dataInfo.status 的值来返回不同的数组 显示预估时为：待提交、待支付、待包装；显示称重后时：待确认、确认中、待发货、已发货、已完成
      // switch (this.dataInfo.status) {
      //   case 'INIT':
      //     return this.dataInfo.serviceItemsList;
      //   case 'WAIT_PAYMENT':
      //     return this.dataInfo.serviceItemsList;
      //   case 'WAIT_PACK':
      //     return this.dataInfo.serviceItemsList;
      //   default:
      //     return this.dataInfo.serviceItemsListFinal;
      // }
    },
    namesJoined() {
      return this.dataInfo.serviceItemsList.map(item => item.name).join('、');
    },
    parcel_status() {
      switch (this.dataInfo.status) {
        case 'INIT':
          return this.$t('user.waitingSubmit');
        case 'WAIT_PAYMENT':
          return this.$t('user.waitPayment');
        case 'WAIT_PACK':
          return this.$t('user.waitingPacking');
        case 'WAIT_CONFIRM':
          return this.$t('user.waitConfirmation');
        case 'CONFIRMING':
          return this.$t('user.confirming');
        case 'WAIT_SHIPPING':
          return this.$t('wayBill.parcel_completed');//待发货即包裹打包完成，待物流商揽收
        case 'DELIVERED':
          return this.$t('user.shipped');
        case 'CANCELED':
          return this.$t('user.cancellationWaybill');
        case 'COMPLETED':
          return this.$t('user.completed');
        case 'CLEAR_BALANCE':
          return this.$t('wayBill.difference');
        default:
          return '';
      }
    },
    computeStyle() {
      const styleObj = {};
      if (this.dataInfo.status === 'WAIT_CONFIRM' || this.dataInfo.status === 'CONFIRMING' || this.dataInfo.status === 'CLEAR_BALANCE') {
        styleObj['align-items'] = 'baseline';
      }
      return styleObj;
    }
  },
  created() {
    this.expressOrderNo = this.$route.query.id;
    this.getCargoList();
  },
  methods: {
    bigMinus,
    moneyMet() {
      return bigMinus(this.dataInfo.estimateFeeDetail.totalFee, this.dataInfo.estimateFeeDetail.couponFee);
    },
    isItemInFinalList(name) {
      return this.dataInfo.serviceItemsListFinal.some(item => item.name === name);
    },
    sureAmount() {
      return bigMinus(this.dataInfo.finalFeeDetail.totalFee, this.dataInfo.finalFeeDetail.couponFee);
    },
    // 提交包裹
    isZhCnAndValidStatus() {
      return this.userLanguage.code === 'zh_CN' && (
        this.dataInfo.status === 'INIT' ||
        this.dataInfo.status === 'WAIT_PAYMENT' ||
        this.dataInfo.status === 'WAIT_PACK' ||
        this.dataInfo.status === 'WAIT_CONFIRM' ||
        this.dataInfo.status === 'CONFIRMING'
      );
    },
    isEnAndValidStatus() {
      return this.userLanguage.code != 'zh_CN' && (
        this.dataInfo.status === 'INIT' ||
        this.dataInfo.status === 'WAIT_PAYMENT' ||
        this.dataInfo.status === 'WAIT_PACK' ||
        this.dataInfo.status === 'WAIT_CONFIRM' ||
        this.dataInfo.status === 'CONFIRMING'
      );
    },
    // 支付中
    isZhPaying() {
      return this.userLanguage.code === 'zh_CN' && (
        this.dataInfo.status === 'CLEAR_BALANCE' ||
        this.dataInfo.status === 'WAIT_SHIPPING'
      );
    },
    isEnPaying() {
      return this.userLanguage.code != 'zh_CN' && (
        this.dataInfo.status === 'CLEAR_BALANCE' ||
        this.dataInfo.status === 'WAIT_SHIPPING'
      );
    },
    // 已发货
    isZhShipping() {
      return this.userLanguage.code === 'zh_CN' && (
        this.dataInfo.status === 'DELIVERED'
      );
    },
    isEnShipping() {
      return this.userLanguage.code != 'zh_CN' && (
        this.dataInfo.status === 'DELIVERED'
      );
    },
    // 确认确定详情详细
    async getCargoList() {
      await detailList(this.expressOrderNo, this.userCurrency.code).then((res) => {
        this.dataInfo = res.result;

        // this.dataInfo.parcelInfoList = this.dataInfo.parcelInfoList.map((item) => {
        //   item.parcelImg = item.parcelImg ? item.parcelImg.split(",") : [];
        //   return item;
        // });
        // 遍历出所有的商品列表数据
        this.dataInfo.parcelInfoList.forEach(item => {
          if (item.parcelGoodsList && item.parcelGoodsList.length > 0) {
            this.dataList = this.dataList.concat(item.parcelGoodsList);
          }
        });
        // 计算所有商品的价格算总价
        this.dataList.forEach(item => {
          const priceInteger = Math.round(item.price * 100);
          const quantityInteger = item.quantity;
          const productPriceInteger = priceInteger * quantityInteger;
          // 计算并保留两位小数
          const tempFee = (productPriceInteger / 100).toFixed(2);
          // 将保留两位小数后的价格累加到总费用中
          this.allFee += parseFloat(tempFee);
        });

        if (res.result.orderAddress) {
          this.orderAddress = res.result.orderAddress;
          this.orderAddress.name = res.result.orderAddress.recipientName.split(",")[0];
          this.orderAddress.surname = res.result.orderAddress.recipientName.split(",")[1];
        }
        // 运单的过期时间倒计时
        this.countDown(this.dataInfo.serverTime, this.dataInfo.status == 'WAIT_PAYMENT' ? this.dataInfo.autoCancelTime : this.dataInfo.expirationTime);
        this.countPayDown(this.dataInfo.serverTime, this.dataInfo.overduePaymentTime);//待支付倒计时
        this.couponCustomerId = this.dataInfo.diffFeeCouponCustomerId;//优惠券已选中id
        this.isShow = this.dataInfo.couponCustomerId;//如果这个值不为空，优惠券入口隐藏掉
        this.cheapLogistics = this.dataInfo.diffFeeDiscountAmount;//已优惠金额
        this.afterDiscountAmount = bigMinus(this.dataInfo.diffFee, this.cheapLogistics);//优惠后实付金额
      });
      // if (this.dataInfo.status == "WAIT_CONFIRM" || this.dataInfo.status == "CONFIRMING") {
      //   await confirmingDetails(this.expressOrderNo, this.userCurrency.code).then((value) => {
      // this.$set(this.dataInfo, "originPaidFee", value.result.originPaidFee);
      // this.$set(this.dataInfo, "finalTotalFee", value.result.finalTotalFee);
      // this.$set(this.dataInfo, "diffFee", value.result.diffFee);
      // this.$set(this.dataInfo, "confirmStrategy", value.result.confirmStrategy);
      //   });
      // }
    },
    timeFormat(param) {
      return param < 10 ? '0' + param : param;
    },
    countDown(newTime, endTime) {
      clearInterval(this.interval1);
      this.interval1 = null;
      this.interval1 = setInterval(() => {
        // 对结束时间进行处理渲染到页面
        let obj = null;
        // 如果活动未结束，对时间进行处理
        if (endTime - newTime > 0) {
          let time = endTime - newTime;
          // 获取天、时、分、秒
          let days = parseInt(time / (1000 * 3600 * 24));
          let remainingSeconds = time % (1000 * 3600 * 24);
          let hours = parseInt(remainingSeconds / (1000 * 3600));
          let remainingMinutesSeconds = remainingSeconds % (1000 * 3600);
          let min = parseInt(remainingMinutesSeconds / (1000 * 60));
          let sec = parseInt((remainingMinutesSeconds % (1000 * 60)) / 1000);
          obj = {
            days: this.timeFormat(days),
            hours: this.timeFormat(hours),
            min: this.timeFormat(min),
            sec: this.timeFormat(sec)
          };
          newTime += 1000;
        } else { // 活动已结束，全部设置为'00'
          obj = {
            days: '00',
            hours: '00',
            min: '00',
            sec: '00'
          };
          clearInterval(this.interval1);
        }
        this.days = obj.days;
        this.hours = obj.hours;
        this.min = obj.min;
        this.sec = obj.sec;
      }, 1000);
    },
    countPayDown(newTime, endTime) {
      clearInterval(this.interval);
      this.interval = null;
      this.interval = setInterval(() => {
        // 对结束时间进行处理渲染到页面
        let obj = null;
        // 如果活动未结束，对时间进行处理
        if (endTime - newTime > 0) {
          let time = endTime - newTime;
          // 获取天、时、分、秒
          let days = parseInt(time / (1000 * 3600 * 24));
          let remainingSeconds = time % (1000 * 3600 * 24);
          let hours = parseInt(remainingSeconds / (1000 * 3600));
          let remainingMinutesSeconds = remainingSeconds % (1000 * 3600);
          let min = parseInt(remainingMinutesSeconds / (1000 * 60));
          let sec = parseInt((remainingMinutesSeconds % (1000 * 60)) / 1000);
          obj = {
            days: this.timeFormat(days),
            hours: this.timeFormat(hours),
            min: this.timeFormat(min),
            sec: this.timeFormat(sec)
          };
          newTime += 1000;
        } else { // 活动已结束，全部设置为'00'
          obj = {
            days: '00',
            hours: '00',
            min: '00',
            sec: '00'
          };
          clearInterval(this.interval);
        }
        this.daysPay = obj.days;
        this.hoursPay = obj.hours;
        this.minPay = obj.min;
        this.secPay = obj.sec;
      }, 1000);
    },
    payMetBtn() {

      pointUser('actions', '2015');

      this.$router.push(`/pay?id=${this.dataInfo.expressOrderNo}&&markText=waybill`)
    },
    // 支付
    payMet() {
      if (!this.agree) {
        this.$Message.error(this.$t('pay.check'));
        return
      }

      pointUser('actions', '2015');

      confirmingDetails(this.expressOrderNo, this.userCurrency.code, this.couponCustomerId).then((value) => {
        this.$set(this.dataInfo, "originPaidFee", value.result.originPaidFee);
        this.$set(this.dataInfo, "finalTotalFee", value.result.finalTotalFee);
        this.$set(this.dataInfo, "diffFee", value.result.diffFee);
        this.$set(this.dataInfo, "confirmStrategy", value.result.confirmStrategy);
        this.$router.push(`/pay?id=${this.dataInfo.expressOrderNo}&&markText=freightSupplement`)
      })
    },
    // 取消包裹
    cancelMet() {
      this.$refs.cancelRef.cancelPop = true;
    },
    confirmCancel(val) {
      if (val == "") {
        this.$Message.error(this.$t("user.pleaseFillReason"));
        this.$Modal.remove();
        return false;
      }
      expressOrderCancel({
        cancelReason: val, // 取消原因
        expressOrderNo: this.dataInfo.expressOrderNo, // 运单号
      }).then(() => {
        this.$refs.cancelRef.cancelPop = false;
        this.getCargoList();
        this.expressOrderNo = "";
        this.val = "";
      }).catch(() => { });
    },
    // 展开
    showMore() {
      this.isMore = !this.isMore;
    },
    // 收起
    pickUp() {
      this.isMore = false;
    },
    // 查看图片
    viewBtn() {
      this.$refs.viewRef.viewPop = true;
    },
    // 优惠券
    openPop() {
      this.$refs.orderCouponRef.loading = true;
      let baseValAmount = this.dataInfo.finalFeeDetail && this.dataInfo.finalFeeDetail.expressFee ? this.dataInfo.finalFeeDetail.expressFee : '';
      myAvailableCouponList({ orderNo: this.$route.query.id, currencyCode: this.userCurrency.code, orderType: 'EXPRESS', amount: this.dataInfo.diffFee, baseAmount: baseValAmount }).then((res) => {
        this.couponDataList = (res.result || []).filter(item => {
          return item.status != 'EXPIRED';
        });

        // 如果找到了匹配项，index 为匹配项的索引
        const index = this.couponDataList.findIndex(item => item.couponCustomerId === this.couponCustomerId);
        if (index !== -1) {
          // 将找到的索引赋值给 this.active
          this.$refs.orderCouponRef.active = index;
        }

        this.$refs.orderCouponRef.loading = false;
        this.$refs.orderCouponRef.open();
      }).catch((err) => {
        console.log(err);
      })
    },
    loadingFc(val) {
      this.loadingAll = val;
      // 解决code500拦截无法取消loadingAll问题
      if (!this.time) {
        this.time = setTimeout(() => {
          this.time = null;
          this.loadingAll = false;
        }, 5000);
      }
    },
    amountAssignment(data) {
      this.couponCustomerId = data.couponCustomerId;
      this.loadingFc(false);
    },
    getCheapInfo(value) {
      this.cheapLogistics = value.discountAmount;//优惠金额
      this.afterDiscountAmount = value.afterDiscountAmount;//优惠后实付
      this.couponCustomerId = value.couponCustomerId;//优惠券id
    },
    callOff() {
      this.cheapLogistics = '';//优惠金额
      this.afterDiscountAmount = '';//取消选中后实付
      this.couponCustomerId = '';//优惠券id
    },
  }
}
</script>
<style lang="less" scoped>
.page {
  .container {
    min-height: 600px;
    background: #FFFFFF;
    margin-top: 24px;
    padding: 32px 160px;

    .head-flow {
      width: 100%;
      height: 100%;
    }

    .gray-rect {
      padding: 32px;
      background: #FFEEF4;
      border-radius: 12px;
      margin-top: 32px;

      .write-area {
        padding: 32px 48px 20px 32px;
        // min-height: 230px;
        background: #FFFFFF;
        border-radius: 8px 8px 8px 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          width: 50%;
          display: flex;
          align-items: end;

          .rect-head {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 24px;

            .head-text {
              font-family: Open Sans, Open Sans;
              font-weight: 600;
              font-size: 20px;
              color: #767B93;
              line-height: 24px;
              display: inline-flex;
              align-items: end;
            }
          }

          .look-btn {
            padding: 8px 20px;
            background: #1E1714;
            border-radius: 8px 8px 8px 8px;
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 22px;
            color: #FFFFFF;
            line-height: 26px;
            margin-left: 33px;
            cursor: pointer;
            text-wrap: nowrap;
          }
        }

        .list-rect {
          display: flex;
          flex-direction: column;
          gap: 8px;

          .loop-rect {

            .logistics-rect {
              padding: 40px 32px 32px 32px;
              background: #FFFFFF;
              border-radius: 8px 8px 8px 8px;
              margin-bottom: 24px;

              .sub-text {
                display: inline-flex;
                align-items: center;
                gap: 40px;
                margin-bottom: 24px;

                span {
                  font-family: Open Sans, Open Sans;
                  font-weight: bold;
                  font-size: 20px;
                  color: #333333;
                  line-height: 23px;
                }
              }

              .info-logistics {
                display: flex;
                justify-content: space-between;
                margin-bottom: 20px;

                .info-left {
                  display: inline-flex;
                  align-items: center;
                  gap: 10px;

                  .dot-icon {
                    width: 10px;
                    height: 10px;
                    background: #333333;
                    border-radius: 50%;
                  }

                  .info-label {
                    font-family: Open Sans, Open Sans;
                    font-weight: 400;
                    font-size: 18px;
                    color: #333333;
                    line-height: 21px;
                  }
                }

                .info-time {
                  font-family: Open Sans, Open Sans;
                  font-weight: 400;
                  font-size: 18px;
                  color: #333333;
                  line-height: 21px;
                }
              }

              .first-logistics {
                display: flex;
                justify-content: space-between;
                margin-bottom: 20px;

                .info-left {
                  display: inline-flex;
                  align-items: center;
                  gap: 10px;

                  .dot-icon {
                    width: 10px;
                    height: 10px;
                    background: #FF186B;
                    border-radius: 50%;
                  }

                  .info-label {
                    font-family: Open Sans, Open Sans;
                    font-weight: 400;
                    font-size: 18px;
                    color: #FF186B;
                    line-height: 21px;
                  }
                }

                .info-time {
                  font-family: Open Sans, Open Sans;
                  font-weight: 400;
                  font-size: 18px;
                  color: #FF186B;
                  line-height: 21px;
                }
              }
            }

            .un-info {
              font-family: Open Sans, Open Sans;
              font-weight: 600;
              font-size: 24px;
              color: #767B93;
              line-height: 28px;
            }

            .more-text {
              font-family: Open Sans, Open Sans;
              font-weight: 400;
              font-size: 24px;
              color: #767B93;
              line-height: 28px;
              text-align: center;
              cursor: pointer;
            }
          }

          .text-desc {
            font-family: Open Sans, Open Sans;
            font-weight: 600;
            font-size: 20px;
            color: #1E1714;
            line-height: 23px;
            text-align: justify;
            display: inline-flex;
            justify-content: end;
            align-items: baseline;
            gap: 8px;

            .amount-text {
              font-family: Open Sans, Open Sans;
              font-weight: 600;
              font-size: 40px;
              color: #1E1714;
              line-height: 42px;
            }

            .dot-icon {
              display: inline-block;
              width: 5px;
              height: 5px;
              background: #FFFFFF;
              border-radius: 50%;
            }
          }

          .desc-content {
            display: inline-block;
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 18px;
            color: #767B93;
            line-height: 21px;
            margin-bottom: 8px;
            text-align: right;

            
          }
					.desc-wait{
						display: inline-block;
						font-family: Open Sans, Open Sans;
						font-weight: 400;
						font-size: 18px;
						color: #767B93;
						line-height: 21px;
						margin-bottom: 24px;
						text-align: right;
						margin-top: 6px;
					}
          .offer-num {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24px;
            color: #FF186B;
            line-height: 28px;
            text-align: right;
            margin-bottom: 8px;
          }

          .feature-sty {
            display: inline-flex;
            justify-content: end;
            align-items: center;
            gap: 18px;
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 18px;
            color: #1E1714;
            line-height: 21px;

            .cou-text {
              min-width: 195px;
              padding: 15px;
              border: 1px solid #FF186B;
              color: #FF186B;
              font-size: 22px;
              line-height: 26px;
              border-radius: 8px;
              text-align: center;
              cursor: pointer;
              display: inline-flex;
              justify-content: center;
              align-items: center;
              gap: 8px;
              margin-right: 18px;
            }

            .select-coupon {
              padding: 15px 45px;
              font-family: Open Sans, Open Sans;
              font-weight: 400;
              font-size: 22px;
              color: #767B93;
              line-height: 26px;
              border-radius: 8px;
              border: 1px solid #767B93;
              cursor: pointer;
            }

            .pay-btn {
              padding: 15px 67px;
              background: #FF186B;
              color: #FFFFFF;
              font-size: 22px;
              line-height: 26px;
              border-radius: 8px;
              cursor: pointer;
              display: inline-flex;
              align-items: center;
              gap: 8px;

              .plan-icon {
                width: 24px;
                height: 24px;
              }
            }

            .cancel-btn {
              padding: 15px 45px;
              font-family: Open Sans, Open Sans;
              font-weight: 400;
              font-size: 22px;
              color: #767B93;
              line-height: 26px;
              border-radius: 8px;
              border: 1px solid #767B93;
              cursor: pointer;
            }
          }
        }
      }

      .list-rect {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .tit-sty {
          margin-top: 24px;

          .pracel-title {
            font-family: Open Sans, Open Sans;
            font-weight: 600;
            font-size: 24px;
            color: #1E1714;
            line-height: 28px;
          }

          .sub-tit {
            font-family: Open Sans, Open Sans;
            font-weight: 500;
            font-size: 18px;
            color: #767B93;
            line-height: 24px;
            margin-left: 8px;
          }
        }

        .loop-rect {

          .logistics-rect {
            padding: 40px 32px 32px 32px;
            background: #FFFFFF;
            border-radius: 8px 8px 8px 8px;
            margin-bottom: 24px;

            .sub-text {
              display: inline-flex;
              align-items: center;
              gap: 40px;
              margin-bottom: 24px;

              span {
                font-family: Open Sans, Open Sans;
                font-weight: bold;
                font-size: 20px;
                color: #333333;
                line-height: 23px;
              }
            }

            .info-logistics {
              display: flex;
              justify-content: space-between;
              margin-bottom: 20px;

              .info-left {
                display: inline-flex;
                align-items: center;
                gap: 10px;

                .dot-icon {
                  width: 10px;
                  height: 10px;
                  background: #333333;
                  border-radius: 50%;
                }

                .info-label {
                  font-family: Open Sans, Open Sans;
                  font-weight: 400;
                  font-size: 18px;
                  color: #333333;
                  line-height: 21px;
                }
              }

              .info-time {
                font-family: Open Sans, Open Sans;
                font-weight: 400;
                font-size: 18px;
                color: #333333;
                line-height: 21px;
              }
            }

            .first-logistics {
              display: flex;
              justify-content: space-between;
              margin-bottom: 20px;

              .info-left {
                display: inline-flex;
                align-items: center;
                gap: 10px;

                .dot-icon {
                  width: 10px;
                  height: 10px;
                  background: #FF186B;
                  border-radius: 50%;
                }

                .info-label {
                  font-family: Open Sans, Open Sans;
                  font-weight: 400;
                  font-size: 18px;
                  color: #FF186B;
                  line-height: 21px;
                }
              }

              .info-time {
                font-family: Open Sans, Open Sans;
                font-weight: 400;
                font-size: 18px;
                color: #FF186B;
                line-height: 21px;
              }
            }
          }

          .un-info {
            font-family: Open Sans, Open Sans;
            font-weight: 600;
            font-size: 24px;
            color: #767B93;
            line-height: 28px;
          }

          .more-text {
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 24px;
            color: #767B93;
            line-height: 28px;
            text-align: center;
            cursor: pointer;
          }
        }

        .text-desc {
          font-family: Open Sans, Open Sans;
          font-weight: 600;
          font-size: 20px;
          color: #1E1714;
          line-height: 23px;
          display: inline-flex;
          justify-content: end;
          align-items: baseline;
          gap: 8px;

          .amount-text {
            font-family: Open Sans, Open Sans;
            font-weight: 600;
            font-size: 40px;
            color: #1E1714;
            line-height: 42px;
          }

          .dot-icon {
            display: inline-block;
            width: 5px;
            height: 5px;
            background: #FFFFFF;
            border-radius: 50%;
          }
        }

        .desc-content {
          display: inline-block;
          font-family: Open Sans, Open Sans;
          font-weight: 400;
          font-size: 18px;
          color: #767B93;
          line-height: 21px;
          margin-bottom: 8px;
          text-align: right;

          
        }

        .feature-sty {
          display: inline-flex;
          align-items: center;
          gap: 18px;
          font-family: Open Sans, Open Sans;
          font-weight: 400;
          font-size: 18px;
          color: #1E1714;
          line-height: 21px;

          .pay-btn {
            padding: 15px 67px;
            background: #FF186B;
            color: #FFFFFF;
            font-size: 22px;
            line-height: 26px;
            border-radius: 8px;
            cursor: pointer;
          }

          .cancel-btn {
            padding: 15px 45px;
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 22px;
            color: #767B93;
            line-height: 26px;
            border-radius: 8px;
            border: 1px solid #767B93;
            cursor: pointer;
          }
        }
      }
    }

    .title-text {
      font-family: Open Sans, Open Sans;
      font-weight: 600;
      font-size: 24px;
      color: #1E1714;
      line-height: 28px;
      margin-top: 32px;
      margin-bottom: 25px;
    }

    .flex-title {

      .title-text {
        font-family: Open Sans, Open Sans;
        font-weight: 600;
        font-size: 24px;
        color: #1E1714;
        line-height: 28px;
        display: inline-flex;
        margin-bottom: 0;

        .text-label {
          white-space: nowrap;
        }

        .tag-sty {
          display: flex;
          flex-wrap: wrap-reverse;
          gap: 12px 32px;

          .service-tag {
            padding: 2px 8px;
            background: #EFFDF0;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #73D873;
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 20px;
            color: #73D873;
            line-height: 23px;

            .desc {
              cursor: pointer;
            }

            .desc-service {
              white-space: normal;
              font-family: Open Sans, Open Sans;
              font-weight: 400;
              font-size: 16px;
              color: #FFFFFF;
              line-height: 19px;
            }
          }

          .charge-tag {
            padding: 2px 8px;
            background: #FFEEF4;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #FF186B;
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 20px;
            color: #FF186B;
            line-height: 23px;

            .desc {
              cursor: pointer;
            }

            .desc-service {
              white-space: normal;
              font-family: Open Sans, Open Sans;
              font-weight: 400;
              font-size: 16px;
              color: #FFFFFF;
              line-height: 19px;
            }
          }

          .insure-tag {
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 20px;
            color: #000000;
            line-height: 23px;

            .desc {
              cursor: pointer;
            }
          }
        }
      }
    }

    .current-address {
      position: relative;

      .bg-border {
        display: block;
        width: 100%;
        min-height: 164px;
      }

      .address-msg {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        padding: 32px;

        .msg-name {
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 24px;
          line-height: 34px;
          color: #333;

          .name-phone {
            font-family: Open Sans, Open Sans;
            font-weight: 600;
            font-size: 25px;
            color: #333333;
            line-height: 30px;
          }
        }

        .msg-address {
          font-family: Open Sans, Open Sans;
          font-weight: 400;
          font-size: 22px;
          color: #AEB0B9;
          line-height: 33px;
          margin-top: 32px;
        }
      }

      .address-info {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        padding: 30px 40px;
        display: flex;
        justify-content: space-between;

        .left {
          display: flex;
          flex-flow: column;
          // justify-content: space-between;
          height: 100%;

          .receiver {
            color: @t-title-color;

            .name {
              font-size: 24px;
              font-weight: 700;
            }

            .contact {
              margin-left: 24px;
              font-size: 14px;
              font-weight: 500;
            }
          }

          .addr {
            color: @t-text-color;

            span {
              display: block;
              margin-top: 6px;
            }
          }
        }

        .right {
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          height: 100%;

          .select-addr {
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 400;

            .default-addr {
              padding: 2px 12px;
              color: @primary-color;
              background: #fff6f0;
              border-radius: 2px;
            }

            .addr-value {
              padding: 2px 12px;
              margin-left: 8px;
              color: @success-color;
              background: #e6f3ec;
              border-radius: 2px;
            }
          }

          .edit-wrap {
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .edit {
              display: flex;
              align-items: center;
              cursor: pointer;

              img {
                display: block;
                width: 16px;
                flex: 0 0 16px;
                height: 16px;
              }

              span {
                margin-left: 4px;
                color: @primary-color;
                font-size: 14px;
                font-weight: 500;
              }
            }
          }
        }
      }
    }

    .info-sty {
      display: inline-flex;
      align-items: center;
      gap: 56px;
      margin-bottom: 16px;

      span {
        font-family: Open Sans, Open Sans;
        font-weight: 400;
        font-size: 22px;
        color: #333333;
        line-height: 26px;
      }
    }

    .fee-detail {
      min-height: 290px;
      background: #F7F9FC;
      border-radius: 8px 8px 8px 8px;
      padding: 50px 28px 17px 28px;

      .fee-head {
        display: flex;
        justify-content: space-between;
        font-family: Open Sans, Open Sans;
        font-weight: 600;
        font-size: 24px;
        color: #333333;
        line-height: 28px;

        .head-title {
          display: inline-flex;
          align-items: baseline;
          gap: 25px;

          .preview-tag {
            padding: 6px 12px;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #FF186B;
            font-family: Inter, Inter;
            font-weight: 400;
            font-size: 16px;
            color: #FF186B;
            line-height: 19px;
            cursor: pointer;

            .desc-service {
              white-space: normal;
              font-family: Open Sans, Open Sans;
              font-weight: 400;
              font-size: 16px;
              color: #FFFFFF;
              line-height: 19px;
            }
          }

          .desc {
            cursor: pointer;
          }
        }
      }

      .gary-body {
        margin: 0 16px;

        .fee-head {
          display: flex;
          justify-content: space-between;
          font-family: Open Sans, Open Sans;
          font-weight: 600;
          font-size: 22px;
          color: #333333;
          line-height: 26px;
          margin-bottom: 25px;

          .head-title {
            display: inline-flex;
            align-items: end;
          }
        }

        .write-rect {
          background: #FFFFFF;
          border-radius: 8px 8px 8px 8px;
          padding: 20px 28px;
          margin-bottom: 20px;

          .service-text {
            display: inline-block;
            font-weight: 400;
            font-size: 20px;
            color: #767B93;
            line-height: 23px;
          }

          .flex-fee {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 20px;
            color: #767B93;
            line-height: 23px;
            margin-bottom: 17px;
          }
        }
      }
    }

    .fee-confirm {
      min-height: 290px;
      background: #FFEEF4;
      border-radius: 8px 8px 8px 8px;
      padding: 50px 28px 17px 28px;

      .fee-head {
        display: flex;
        justify-content: space-between;
        font-family: Open Sans, Open Sans;
        font-weight: 600;
        font-size: 24px;
        color: #333333;
        line-height: 28px;

        .head-title {
          display: inline-flex;
          align-items: end;

          .desc {
            cursor: pointer;
          }
        }
      }

      .gary-body {
        margin: 0 16px;

        .fee-head {
          display: flex;
          justify-content: space-between;
          font-family: Open Sans, Open Sans;
          font-weight: 600;
          font-size: 22px;
          color: #333333;
          line-height: 26px;
          margin-bottom: 25px;

          .head-title {
            display: inline-flex;
            align-items: end;
          }
        }

        .write-rect {
          background: #FFFFFF;
          border-radius: 8px 8px 8px 8px;
          padding: 20px 28px;
          margin-bottom: 20px;

          .service-text {
            display: inline-block;
            font-weight: 400;
            font-size: 20px;
            color: #767B93;
            line-height: 23px;
          }

          .strikethrough {
            text-decoration: line-through;
          }

          .flex-fee {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 20px;
            color: #767B93;
            line-height: 23px;
            margin-bottom: 17px;
          }
        }
      }
    }

    .table-wrap {
      border-radius: 12px 12px 12px 12px;
      border: 2px solid #E9EAF3;
      padding-bottom: 32px;

      .table {
        &-header {
          height: 65px;
          padding: 12px 24px;
          background: #F7F9FC;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .th {
            text-align: center;
            font-family: PingFang HK, PingFang HK;
            font-weight: 600;
            font-size: 18px;
            color: #929292;
            line-height: 21px;
          }
        }

        &-content {
          margin: 0 45px 0 41px;

          .table-tr {
            padding: 0 0 32px 0;
            border-bottom: 1px solid #E9EAF3;

            .table-top {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .left {
                display: flex;
                align-items: center;
                color: @t-label-color;
                font-size: 14px;

                .date {
                  margin: 0 12px;
                }

                .fun {
                  cursor: pointer;
                  color: @primary-color;
                  margin-right: 32px;
                }

                .text {
                  margin-left: 4px;
                  margin-top: 4px;
                }

                .top-item {
                  margin-top: 4px;
                  margin-left: 46px;
                }
              }

              .right {
                height: 14px;
                margin-right: 32px;

                .chat-with-us {
                  display: inline-flex;
                  align-items: flex-start;
                  gap: 6px;
                  cursor: pointer;
                }
              }

              .delete {
                cursor: pointer;
                color: @primary-color;
                font-size: 14px;
              }
            }

            .table-body {
              margin-top: 30px;
              font-family: PingFang HK, PingFang HK;
              font-size: 15px;

              .order-item {
                margin-top: 12px;

                &:first-child {
                  margin-top: 0;
                }
              }

              .td {
                height: 100%;
                // display: flex;
                // justify-content: center;
                // align-items: center;
                font-family: PingFang HK, PingFang HK;
                font-weight: 400;
                font-size: 15px;
                color: #1E1714;
                line-height: 18px;

                .td-type {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  height: 28px;
                  border-radius: 4px;
                  background: #FFF0E8;
                  box-sizing: border-box;
                  padding: 0 8px;
                  cursor: pointer;

                  .type-name {
                    margin-right: 4px;
                  }

                  .type-icon {
                    color: #FF186B;
                    font-size: 14px;
                    line-height: 14px;
                  }
                }

                .commodity-content {
                  .title {
                    font-family: Open Sans, Open Sans;
                    font-weight: 600;
                    font-size: 18px;
                    color: #222222;
                    line-height: 21px;
                    white-space: pre-line;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                  }
                }

                .type-list {
                  min-width: 100px;
                  padding: 4px 8px;
                  background: #FFF0E8;
                  border-radius: 4px;
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 14px;
                  color: #FF7F63;
                  line-height: 16px;
                  display: inline-flex;
                  align-items: center;
                  justify-content: center;
                  gap: 4px;
                  cursor: pointer;

                  .type-desc {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 16px;
                    color: #ffffff;
                    line-height: 19px;
                    white-space: normal;
                  }
                }

                .time-show {
                  display: flex;
                  flex-direction: column;
                  align-items: center;

                  .line-sty {
                    display: inline-flex;
                    align-items: center;
                    gap: 2px;
                    margin-top: 5px;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #FF186B;
                    line-height: 14px;
                  }
                }

                .time-icon {
                  width: 16px;
                  height: 16px;
                }

                .btn {
                  cursor: pointer;
                  color: @primary-color;
                  font-size: 12px;
                }
              }

              .align-sty {
                text-align: center;
                margin-top: 31px;

                .td-type {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  height: 28px;
                  border-radius: 4px;
                  background: #FFF0E8;
                  box-sizing: border-box;
                  padding: 0 8px;
                  cursor: pointer;

                  .type-name {
                    margin-right: 4px;
                  }

                  .type-icon {
                    color: #FF186B;
                    font-size: 14px;
                    line-height: 14px;
                  }
                }
              }

              .picture-sty {
                display: flex;
                justify-content: center;
              }

              .return-btn {
                display: flex;
                flex-direction: column;
                align-items: center;

                .date {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 15px;
                  color: #3361FF;
                  line-height: 18px;
                }

                .return-text {
                  font-family: PingFang HK, PingFang HK;
                  font-weight: 400;
                  font-size: 15px;
                  color: #FF186B;
                  line-height: 16px;
                  cursor: pointer;
                  margin-bottom: 8px;
                }
              }

              .order-info {
                &:hover {
                  cursor: pointer;
                  color: @primary-color;
                }
              }

              .td-commodity {
                padding-left: 0;
                justify-content: start;

                .tag {
                  display: flex;
                  align-items: center;
                  margin-left: 116px;
                  font-size: 12px;
                  font-weight: 500;
                  color: @t-title-color;

                  .iconfont {
                    font-size: 14px;
                    color: @t-title-color;
                  }
                }

                .tag-list {
                  display: flex;

                  .tag {
                    margin-left: 4px;
                    font-size: 12px;
                  }
                }

                .remark {
                  display: block;
                  cursor: pointer;
                  margin-left: 116px;
                  font-size: 12px;
                }
              }

              .edit {
                cursor: pointer;
              }

              .return-text {
                font-family: PingFang HK, PingFang HK;
                font-weight: 400;
                font-size: 15px;
                color: #FF186B;
                line-height: 16px;
                cursor: pointer;
                margin-bottom: 8px;
              }

              .commodity-info {
                display: flex;
                align-items: center;

                .info {
                  display: flex;

                  .commodity-left {
                    display: flex;
                    align-items: center;
                    gap: 12px;

                    .image {
                      display: block;
                      width: 80px;
                      height: 80px;
                      border-radius: 4px 4px 4px 4px;
                    }
                  }

                  .commodity-content {
                    font-size: 15px;
                    margin-left: 20px;

                    .title {
                      font-weight: 500;
                      font-size: 15px;
                      color: #222222;
                      line-height: 18px;
                      white-space: pre-line;
                      /*允许换行*/
                      overflow: hidden;
                      text-overflow: ellipsis;
                      /*省略号*/
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      /*行向垂直排列*/
                      -webkit-line-clamp: 2; //*限制2
                      margin-bottom: 10px;
                    }

                    .intro {
                      font-size: 13px;
                      margin-bottom: 3px;
                      color: #666666;
                      white-space: pre-line;
                      /*允许换行*/
                      overflow: hidden;
                      text-overflow: ellipsis;
                      /*省略号*/
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      /*行向垂直排列*/
                      -webkit-line-clamp: 2; //*限制2
                    }
                  }
                }
              }

              .pay {
                text-align: center;

                .pay-date {
                  color: @t-text-color;
                  text-align: center;
                }
              }
            }
          }

          .all-money {
            font-family: Open Sans, Open Sans;
            font-weight: 600;
            font-size: 28px;
            color: #333333;
            line-height: 33px;
            text-align: right;
            margin-top: 32px;
          }
        }
      }
    }

    .fix-bot {
      //position: sticky;
      //bottom: 0;
      padding: 31px 41px 31px 0;
      background: #FFFFFF;
      box-shadow: 0px -3px 29px 0px rgba(231, 231, 231, 0.29);
      border: 1px solid #EAEAF3;
      border-radius: 15px 15px 0 0;
      margin-top: 24px;

      .head {
        text-align: right;
        margin-bottom: 15px;

        :deep(.ivu-checkbox-wrapper) {
          display: inline-flex;
          align-items: end;

          .text {
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 19px;
            color: #666666;
            line-height: 22px;
            margin-left: 4px;
          }

          .tag {
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 19px;
            color: #F21473;
            line-height: 22px;
            margin-left: 26px;
          }
        }
      }

      .info-fee {
        display: flex;
        justify-content: end;
        align-items: end;
        gap: 24px;

        .fee {

          .amount {
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 18px;
            color: #767B93;
            line-height: 21px;

            span {
              font-size: 28px;
              color: #FF186B;
              line-height: 33px;
              font-weight: 600;
            }
          }

          .offer {
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 16px;
            color: #1E1714;
            line-height: 23px;
            text-align: right;
            margin-top: 6px;
          }
        }

        .cou-btn {
          padding: 14px 15px;
          border: 1px solid #FF186B;
          border-radius: 10px 10px 10px 10px;
          font-family: Open Sans, Open Sans;
          font-weight: 600;
          font-size: 19px;
          color: #FF186B;
          line-height: 22px;
          cursor: pointer;
        }

        .pay-btn {
          padding: 14px 35px;
          background: #FF186B;
          border-radius: 10px 10px 10px 10px;
          font-family: Open Sans, Open Sans;
          font-weight: 600;
          font-size: 19px;
          color: #FFFFFF;
          line-height: 22px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
